<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{:: title})">
    <title>博客管理</title>
</head>
<body>
    <!--导航-->
    <nav th:replace="admin/_fragments :: nav(1)"></nav>

    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" th:href="@{/admin/blogs/input}" class="teal active item">发布</a>
                <a href="#" th:href="@{/admin/blogs}" class="teal item">列表</a>
            </div>
        </div>
    </div>

    <!--中间内容-->
    <div class="m-container m-padding-tb-huge">
       <div class="ui container">
           <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blogs}" method="post" class="ui form">
               <input type="hidden" name="published">
               <input type="hidden" name="id" th:value="*{id}">
               <div class="required field">
                   <div class="ui left labeled input">
                       <div class="ui selection compact teal basic dropdown label">
                           <input type="hidden" value="原创" name="flag" th:value="*{flag}">
                           <i class="dropdown icon"></i>
                           <div class="text">请选择</div>
                           <div class="menu">
                               <div class="item" data-value="原创">原创</div>
                               <div class="item" data-value="转载">转载</div>
                               <div class="item" data-value="翻译">翻译</div>
                           </div>
                       </div>
                       <input type="text" name="title" placeholder="标题" th:value="*{title}">
                   </div>
               </div>

               <div class="required field">
                   <div id="md-content" style="z-index: 1 !important;">
                       <textarea placeholder="博客内容" name="content" style="display: none" th:text="*{content}"></textarea>
                   </div>

               </div>

               <div class="two fields">
                   <div class="required field">
                       <div class="ui left labeled action input">
                           <label class="ui compact teal basic label">分类</label>
                           <div class="ui fluid selection dropdown">
                               <input type="hidden" name="type.id" th:value="*{type} != null ? *{type.id}">
                               <i class="dropdown icon"></i>
                               <div class="default text">分类</div>
                               <div class="menu">
                                   <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">错误日志</div>
                               </div>
                           </div>
                       </div>
                   </div>

                   <div class="field">
                       <div class="ui left labeled action input">
                           <label class="ui compact teal basic label">标签</label>
                           <div class="ui fluid selection  multiple search dropdown">
                               <input type="hidden" name="tagIds" th:value="*{tagIds}">
                               <i class="dropdown icon"></i>
                               <div class="default text">标签</div>
                               <div class="menu">
                                   <div th:each="tag : ${tags}" class="item" data-value="1" th:data-value="${tag.id}" th:text="${tag.name}">错误日志</div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>

               <div class="field">
                   <div class="ui attached">
                       <label class="ui teal basic label">描述</label>
                       <textarea name="description" placeholder="请输入相关描述..." th:text="*{description}"></textarea>
                   </div>
               </div>

               <div class="required field">
                   <div class="ui left labeled input">
                       <label class="ui teal basic label">首图</label>
                       <input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址">
                   </div>

               </div>

               <div class="inline fields">
                   <div class="field">
                       <div class="ui checkbox">
                           <input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden">
                           <label for="recommend">推荐</label>
                       </div>
                   </div>
                   <div class="field">
                       <div class="ui checkbox">
                           <input type="checkbox" id="shareStatement" name="shareStatement" th:checked="*{shareStatement}" class="hidden">
                           <label for="shareStatement">转载声明</label>
                       </div>
                   </div>
                   <div class="field">
                       <div class="ui checkbox">
                           <input type="checkbox" id="appreciation" name="appreciation" th:checked="*{appreciation}" class="hidden">
                           <label for="appreciation">赞赏</label>
                       </div>
                   </div>
                   <div class="field">
                       <div class="ui checkbox">
                           <input type="checkbox" id="commentabled" name="commentabled" th:checked="*{commentabled}" class="hidden">
                           <label for="commentabled">评论</label>
                       </div>
                   </div>
               </div>

               <div class="ui error message"></div>

               <div class="ui right aligned container">
                   <button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
                   <button type="button" id="save-btn" class="ui blue button">保存</button>
                   <button type="button" id="publish-btn" class="ui orange button">发布</button>
               </div>

           </form>
       </div>
    </div>

    <br>
    <br>
    <br>

    <!--底部footer-->
    <footer th:replace="admin/_fragments :: footer"></footer>

    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
    <!--/*/</th:block>/*/-->
    <script>
        // 初始化markdown编辑器
        var contentEditor;
        $(function() {
            contentEditor = editormd("md-content", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                path    : "/lib/editormd/lib/",
                saveHTMLToTextarea: true,
                toolbarModes: 'full',

                /**图片上传配置*/
                imageUpload: true,//开启图片上传功能
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], //图片上传格式
                imageUploadURL: "/admin/blogs/md/uploadfile",//选好图片之后，上传时的后端（java层）地址
                onload: function (obj) {}
            });
        });


        // 页面
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide')
        });

        $('.ui.dropdown').dropdown({
            on : 'hover'
        });

        $('#save-btn').click(function (){
           $("[name='published']").val(false);
           $("#blog-form").submit();

        });

        $('#publish-btn').click(function (){
            $("[name='published']").val(true);
            $("#blog-form").submit();
        });

        $('.ui.form').form({
            fields : {
                title : {
                    identifier : 'title',
                    rules : [{
                        type : 'empty',
                        prompt : '请输入博客标题'
                    }]
                },
                content : {
                    identifier : 'content',
                    rules : [{
                        type : 'empty',
                        prompt : '请输入博客内容'
                    }]
                },
                typeId : {
                    identifier : 'type.id',
                    rules : [{
                        type : 'empty',
                        prompt : '请输入博客分类'
                    }]
                },
                firstPicture : {
                    identifier : 'firstPicture',
                    rules : [{
                        type : 'empty',
                        prompt : '请输入博客首图'
                    }]
                }
            }
        });
    </script>
</body>
</html>